<template>
  <div class="register-page">
    <div class="register-container">
      <!-- 左侧装饰区域 -->
      <div class="register-decoration">
        <div class="decoration-content">
          <div class="logo-section">
            <div class="logo">
              <img src="/logo.svg" alt="Logo" class="logo-image" />
              <span class="logo-text">在线学习平台</span>
            </div>
          </div>
          
          <div class="welcome-section">
            <h1 class="welcome-title">开启学习之旅</h1>
            <p class="welcome-subtitle">加入我们，探索无限可能</p>
            
            <div class="features-list">
              <div class="feature-item">
                <el-icon class="feature-icon"><Reading /></el-icon>
                <div class="feature-text">
                  <h3>丰富课程</h3>
                  <p>海量优质课程资源</p>
                </div>
              </div>
              
              <div class="feature-item">
                <el-icon class="feature-icon"><Medal /></el-icon>
                <div class="feature-text">
                  <h3>权威认证</h3>
                  <p>获得行业认可证书</p>
                </div>
              </div>
              
              <div class="feature-item">
                <el-icon class="feature-icon"><User /></el-icon>
                <div class="feature-text">
                  <h3>专业指导</h3>
                  <p>资深讲师在线答疑</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="stats-section">
            <div class="stat-item">
              <div class="stat-number">10万+</div>
              <div class="stat-label">注册学员</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">1000+</div>
              <div class="stat-label">精品课程</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">95%</div>
              <div class="stat-label">满意度</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧注册表单 -->
      <div class="register-form-section">
        <div class="form-container">
          <div class="form-header">
            <h2 class="form-title">创建账户</h2>
            <p class="form-subtitle">填写信息完成注册</p>
          </div>
          
          <!-- 注册步骤指示器 -->
          <div class="steps-indicator">
            <div
              v-for="(step, index) in steps"
              :key="index"
              class="step-item"
              :class="{
                'active': currentStep === index + 1,
                'completed': currentStep > index + 1
              }"
            >
              <div class="step-number">{{ index + 1 }}</div>
              <div class="step-label">{{ step.label }}</div>
            </div>
          </div>
          
          <!-- 注册表单 -->
          <el-form
            ref="registerForm"
            :model="registerData"
            :rules="registerRules"
            class="register-form"
            label-position="top"
            @submit.prevent="handleRegister"
          >
            <!-- 第一步：基本信息 -->
            <div v-show="currentStep === 1" class="step-content">
              <el-form-item label="用户名" prop="username">
                <el-input
                  v-model="registerData.username"
                  placeholder="请输入用户名"
                  size="large"
                  :prefix-icon="User"
                  clearable
                />
              </el-form-item>
              
              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model="registerData.email"
                  placeholder="请输入邮箱地址"
                  size="large"
                  :prefix-icon="Message"
                  clearable
                />
              </el-form-item>
              
              <el-form-item label="手机号" prop="phone">
                <el-input
                  v-model="registerData.phone"
                  placeholder="请输入手机号"
                  size="large"
                  :prefix-icon="Phone"
                  clearable
                />
              </el-form-item>
            </div>
            
            <!-- 第二步：密码设置 -->
            <div v-show="currentStep === 2" class="step-content">
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="registerData.password"
                  type="password"
                  placeholder="请输入密码"
                  size="large"
                  :prefix-icon="Lock"
                  show-password
                  clearable
                />
                <div class="password-strength">
                  <div class="strength-label">密码强度：</div>
                  <div class="strength-bar">
                    <div
                      class="strength-item"
                      :class="{ active: passwordStrength >= 1 }"
                    ></div>
                    <div
                      class="strength-item"
                      :class="{ active: passwordStrength >= 2 }"
                    ></div>
                    <div
                      class="strength-item"
                      :class="{ active: passwordStrength >= 3 }"
                    ></div>
                  </div>
                  <div class="strength-text">{{ passwordStrengthText }}</div>
                </div>
              </el-form-item>
              
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input
                  v-model="registerData.confirmPassword"
                  type="password"
                  placeholder="请再次输入密码"
                  size="large"
                  :prefix-icon="Lock"
                  show-password
                  clearable
                />
              </el-form-item>
            </div>
            
            <!-- 第三步：验证码 -->
            <div v-show="currentStep === 3" class="step-content">
              <el-form-item label="邮箱验证码" prop="emailCode">
                <div class="verification-input">
                  <el-input
                    v-model="registerData.emailCode"
                    placeholder="请输入邮箱验证码"
                    size="large"
                    :prefix-icon="Message"
                    clearable
                  />
                  <el-button
                    :disabled="emailCodeCountdown > 0"
                    @click="sendEmailCode"
                  >
                    {{ emailCodeCountdown > 0 ? `${emailCodeCountdown}s` : '发送验证码' }}
                  </el-button>
                </div>
              </el-form-item>
              
              <el-form-item label="手机验证码" prop="phoneCode">
                <div class="verification-input">
                  <el-input
                    v-model="registerData.phoneCode"
                    placeholder="请输入手机验证码"
                    size="large"
                    :prefix-icon="Phone"
                    clearable
                  />
                  <el-button
                    :disabled="phoneCodeCountdown > 0"
                    @click="sendPhoneCode"
                  >
                    {{ phoneCodeCountdown > 0 ? `${phoneCodeCountdown}s` : '发送验证码' }}
                  </el-button>
                </div>
              </el-form-item>
              
              <el-form-item prop="agreement">
                <el-checkbox v-model="registerData.agreement">
                  我已阅读并同意
                  <el-button type="primary" text @click="showUserAgreement">
                    《用户协议》
                  </el-button>
                  和
                  <el-button type="primary" text @click="showPrivacyPolicy">
                    《隐私政策》
                  </el-button>
                </el-checkbox>
              </el-form-item>
            </div>
            
            <!-- 操作按钮 -->
            <div class="form-actions">
              <el-button
                v-if="currentStep > 1"
                size="large"
                @click="prevStep"
              >
                上一步
              </el-button>
              
              <el-button
                v-if="currentStep < 3"
                type="primary"
                size="large"
                @click="nextStep"
              >
                下一步
              </el-button>
              
              <el-button
                v-if="currentStep === 3"
                type="primary"
                size="large"
                :loading="registerLoading"
                @click="handleRegister"
              >
                完成注册
              </el-button>
            </div>
          </el-form>
          
          <!-- 其他登录方式 -->
          <div class="other-login">
            <div class="divider">
              <span>或者使用以下方式注册</span>
            </div>
            
            <div class="social-login">
              <el-button class="social-btn wechat" @click="wechatRegister">
                <el-icon><ChatDotRound /></el-icon>
                微信注册
              </el-button>
              
              <el-button class="social-btn qq" @click="qqRegister">
                <el-icon><User /></el-icon>
                QQ注册
              </el-button>
            </div>
          </div>
          
          <!-- 登录链接 -->
          <div class="login-link">
            <span>已有账户？</span>
            <el-button type="primary" text @click="goToLogin">
              立即登录
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 用户协议对话框 -->
    <el-dialog
      v-model="showAgreementDialog"
      title="用户协议"
      width="600px"
      class="agreement-dialog"
    >
      <div class="agreement-content">
        <h3>1. 服务条款</h3>
        <p>欢迎使用我们的在线学习平台。通过注册和使用本服务，您同意遵守以下条款和条件。</p>
        
        <h3>2. 用户责任</h3>
        <p>用户应当提供真实、准确的个人信息，并保证账户安全。用户对其账户下的所有活动负责。</p>
        
        <h3>3. 服务内容</h3>
        <p>我们提供在线课程、考试、证书等学习服务。服务内容可能会根据需要进行调整。</p>
        
        <h3>4. 知识产权</h3>
        <p>平台上的所有内容，包括但不限于文字、图片、视频等，均受知识产权法保护。</p>
        
        <h3>5. 免责声明</h3>
        <p>在法律允许的范围内，我们不对因使用本服务而产生的任何损失承担责任。</p>
      </div>
      
      <template #footer>
        <el-button @click="showAgreementDialog = false">关闭</el-button>
      </template>
    </el-dialog>
    
    <!-- 隐私政策对话框 -->
    <el-dialog
      v-model="showPrivacyDialog"
      title="隐私政策"
      width="600px"
      class="privacy-dialog"
    >
      <div class="privacy-content">
        <h3>1. 信息收集</h3>
        <p>我们收集您主动提供的信息，如注册信息、学习记录等，以提供更好的服务。</p>
        
        <h3>2. 信息使用</h3>
        <p>我们使用收集的信息来提供、维护和改进我们的服务，以及与您沟通。</p>
        
        <h3>3. 信息保护</h3>
        <p>我们采用适当的安全措施来保护您的个人信息，防止未经授权的访问、使用或披露。</p>
        
        <h3>4. 信息共享</h3>
        <p>除非获得您的同意或法律要求，我们不会与第三方共享您的个人信息。</p>
        
        <h3>5. Cookie使用</h3>
        <p>我们使用Cookie来改善用户体验，您可以通过浏览器设置来管理Cookie。</p>
      </div>
      
      <template #footer>
        <el-button @click="showPrivacyDialog = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  User, Lock, Message, Phone, Reading, Medal,
  ChatDotRound
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { validateEmail, validatePhone, validatePassword } from '@/utils/validation'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const registerForm = ref()
const currentStep = ref(1)
const registerLoading = ref(false)
const emailCodeCountdown = ref(0)
const phoneCodeCountdown = ref(0)
const showAgreementDialog = ref(false)
const showPrivacyDialog = ref(false)

// 注册步骤
const steps = [
  { label: '基本信息' },
  { label: '密码设置' },
  { label: '验证码' }
]

// 注册数据
const registerData = reactive({
  username: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: '',
  emailCode: '',
  phoneCode: '',
  agreement: false
})

// 表单验证规则
const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
      message: '用户名只能包含字母、数字、下划线和中文',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!validateEmail(value)) {
          callback(new Error('请输入正确的邮箱格式'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!validatePhone(value)) {
          callback(new Error('请输入正确的手机号格式'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const result = validatePassword(value)
        if (!result.valid) {
          callback(new Error(result.message))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== registerData.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  emailCode: [
    { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度为6位', trigger: 'blur' }
  ],
  phoneCode: [
    { required: true, message: '请输入手机验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度为6位', trigger: 'blur' }
  ],
  agreement: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请阅读并同意用户协议和隐私政策'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

// 计算属性
const passwordStrength = computed(() => {
  const password = registerData.password
  if (!password) return 0
  
  let strength = 0
  
  // 长度检查
  if (password.length >= 8) strength++
  
  // 复杂度检查
  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++
  if (/\d/.test(password) && /[!@#$%^&*(),.?":{}|<>]/.test(password)) strength++
  
  return strength
})

const passwordStrengthText = computed(() => {
  const strengthMap = {
    0: '弱',
    1: '中',
    2: '强',
    3: '很强'
  }
  return strengthMap[passwordStrength.value] || '弱'
})

// 监听密码变化，重新验证确认密码
watch(
  () => registerData.password,
  () => {
    if (registerData.confirmPassword) {
      registerForm.value?.validateField('confirmPassword')
    }
  }
)

// 方法
const nextStep = async () => {
  try {
    // 验证当前步骤的字段
    const fieldsToValidate = getStepFields(currentStep.value)
    await registerForm.value.validateField(fieldsToValidate)
    
    if (currentStep.value < 3) {
      currentStep.value++
    }
  } catch (error) {
    // 验证失败，不进入下一步
  }
}

const prevStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--
  }
}

const getStepFields = (step) => {
  const stepFieldsMap = {
    1: ['username', 'email', 'phone'],
    2: ['password', 'confirmPassword'],
    3: ['emailCode', 'phoneCode', 'agreement']
  }
  return stepFieldsMap[step] || []
}

const sendEmailCode = async () => {
  try {
    // 验证邮箱格式
    await registerForm.value.validateField('email')
    
    // 发送邮箱验证码
    await userStore.sendEmailVerificationCode(registerData.email)
    
    // 开始倒计时
    emailCodeCountdown.value = 60
    const timer = setInterval(() => {
      emailCodeCountdown.value--
      if (emailCodeCountdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
    
    ElMessage.success('验证码已发送到您的邮箱')
  } catch (error) {
    ElMessage.error('发送验证码失败')
  }
}

const sendPhoneCode = async () => {
  try {
    // 验证手机号格式
    await registerForm.value.validateField('phone')
    
    // 发送手机验证码
    await userStore.sendPhoneVerificationCode(registerData.phone)
    
    // 开始倒计时
    phoneCodeCountdown.value = 60
    const timer = setInterval(() => {
      phoneCodeCountdown.value--
      if (phoneCodeCountdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
    
    ElMessage.success('验证码已发送到您的手机')
  } catch (error) {
    ElMessage.error('发送验证码失败')
  }
}

const handleRegister = async () => {
  try {
    // 验证所有字段
    await registerForm.value.validate()
    
    registerLoading.value = true
    
    // 执行注册
    await userStore.register({
      username: registerData.username,
      email: registerData.email,
      phone: registerData.phone,
      password: registerData.password,
      emailCode: registerData.emailCode,
      phoneCode: registerData.phoneCode
    })
    
    ElMessage.success('注册成功！')
    
    // 跳转到登录页面或首页
    router.push('/login')
    
  } catch (error) {
    ElMessage.error(error.message || '注册失败')
  } finally {
    registerLoading.value = false
  }
}

const wechatRegister = () => {
  ElMessage.info('微信注册功能开发中...')
}

const qqRegister = () => {
  ElMessage.info('QQ注册功能开发中...')
}

const goToLogin = () => {
  router.push('/login')
}

const showUserAgreement = () => {
  showAgreementDialog.value = true
}

const showPrivacyPolicy = () => {
  showPrivacyDialog.value = true
}
</script>

<style lang="scss" scoped>
.register-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.register-container {
  width: 100%;
  max-width: 1200px;
  background: var(--el-bg-color);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 700px;
}

// 左侧装饰区域
.register-decoration {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="%23ffffff" opacity="0.1"/></svg>') repeat;
    animation: float 20s infinite linear;
  }
  
  .decoration-content {
    position: relative;
    z-index: 1;
  }
  
  .logo-section {
    margin-bottom: 40px;
    
    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .logo-image {
        width: 40px;
        height: 40px;
      }
      
      .logo-text {
        font-size: 1.5rem;
        font-weight: 600;
      }
    }
  }
  
  .welcome-section {
    margin-bottom: 40px;
    
    .welcome-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 16px;
      line-height: 1.2;
    }
    
    .welcome-subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
      margin-bottom: 32px;
    }
    
    .features-list {
      .feature-item {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
        
        .feature-icon {
          width: 48px;
          height: 48px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          flex-shrink: 0;
        }
        
        .feature-text {
          h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 4px;
          }
          
          p {
            opacity: 0.8;
            margin: 0;
          }
        }
      }
    }
  }
  
  .stats-section {
    display: flex;
    gap: 32px;
    
    .stat-item {
      text-align: center;
      
      .stat-number {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 4px;
      }
      
      .stat-label {
        opacity: 0.8;
        font-size: 14px;
      }
    }
  }
}

// 右侧表单区域
.register-form-section {
  padding: 60px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .form-container {
    width: 100%;
    max-width: 400px;
  }
  
  .form-header {
    text-align: center;
    margin-bottom: 32px;
    
    .form-title {
      font-size: 2rem;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin-bottom: 8px;
    }
    
    .form-subtitle {
      color: var(--el-text-color-secondary);
      margin: 0;
    }
  }
}

// 步骤指示器
.steps-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  
  .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    
    &:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 16px;
      left: 60%;
      right: -40%;
      height: 2px;
      background: var(--el-border-color-lighter);
      z-index: 0;
    }
    
    &.completed::after {
      background: var(--el-color-primary);
    }
    
    .step-number {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--el-border-color-lighter);
      color: var(--el-text-color-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      margin-bottom: 8px;
      position: relative;
      z-index: 1;
      transition: all 0.3s;
    }
    
    .step-label {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      text-align: center;
    }
    
    &.active {
      .step-number {
        background: var(--el-color-primary);
        color: white;
      }
      
      .step-label {
        color: var(--el-color-primary);
        font-weight: 500;
      }
    }
    
    &.completed {
      .step-number {
        background: var(--el-color-success);
        color: white;
      }
      
      .step-label {
        color: var(--el-color-success);
      }
    }
  }
}

// 注册表单
.register-form {
  .step-content {
    min-height: 200px;
  }
  
  :deep(.el-form-item) {
    margin-bottom: 24px;
    
    .el-form-item__label {
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
  }
  
  :deep(.el-input) {
    .el-input__wrapper {
      border-radius: 8px;
    }
  }
}

// 密码强度指示器
.password-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  
  .strength-label {
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }
  
  .strength-bar {
    display: flex;
    gap: 4px;
    
    .strength-item {
      width: 20px;
      height: 4px;
      background: var(--el-border-color-lighter);
      border-radius: 2px;
      transition: background-color 0.3s;
      
      &.active {
        &:nth-child(1) {
          background: var(--el-color-danger);
        }
        
        &:nth-child(2) {
          background: var(--el-color-warning);
        }
        
        &:nth-child(3) {
          background: var(--el-color-success);
        }
      }
    }
  }
  
  .strength-text {
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }
}

// 验证码输入
.verification-input {
  display: flex;
  gap: 12px;
  
  .el-input {
    flex: 1;
  }
  
  .el-button {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

// 表单操作按钮
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  
  .el-button {
    flex: 1;
  }
}

// 其他登录方式
.other-login {
  margin-top: 32px;
  
  .divider {
    position: relative;
    text-align: center;
    margin-bottom: 24px;
    
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--el-border-color-lighter);
    }
    
    span {
      background: var(--el-bg-color);
      padding: 0 16px;
      color: var(--el-text-color-secondary);
      font-size: 14px;
      position: relative;
      z-index: 1;
    }
  }
  
  .social-login {
    display: flex;
    gap: 12px;
    
    .social-btn {
      flex: 1;
      height: 44px;
      border-radius: 8px;
      
      &.wechat {
        background: #07c160;
        border-color: #07c160;
        color: white;
        
        &:hover {
          background: #06ad56;
          border-color: #06ad56;
        }
      }
      
      &.qq {
        background: #1296db;
        border-color: #1296db;
        color: white;
        
        &:hover {
          background: #0e7cc0;
          border-color: #0e7cc0;
        }
      }
    }
  }
}

// 登录链接
.login-link {
  text-align: center;
  margin-top: 24px;
  color: var(--el-text-color-secondary);
  
  .el-button {
    margin-left: 4px;
  }
}

// 对话框样式
.agreement-dialog,
.privacy-dialog {
  :deep(.el-dialog__body) {
    max-height: 400px;
    overflow-y: auto;
  }
  
  .agreement-content,
  .privacy-content {
    h3 {
      color: var(--el-text-color-primary);
      font-size: 16px;
      font-weight: 600;
      margin: 16px 0 8px 0;
      
      &:first-child {
        margin-top: 0;
      }
    }
    
    p {
      color: var(--el-text-color-regular);
      line-height: 1.6;
      margin-bottom: 12px;
    }
  }
}

// 动画
@keyframes float {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(-100px) translateY(-100px);
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .register-container {
    grid-template-columns: 1fr;
    max-width: 500px;
    
    .register-decoration {
      display: none;
    }
  }
}

@media (max-width: 768px) {
  .register-page {
    padding: 16px;
  }
  
  .register-container {
    border-radius: 12px;
    
    .register-form-section {
      padding: 40px 24px;
    }
  }
  
  .steps-indicator {
    .step-item {
      .step-label {
        font-size: 10px;
      }
    }
  }
  
  .form-header {
    .form-title {
      font-size: 1.5rem;
    }
  }
  
  .verification-input {
    flex-direction: column;
    
    .el-button {
      width: 100%;
    }
  }
  
  .social-login {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .register-form-section {
    padding: 32px 20px;
  }
  
  .steps-indicator {
    .step-item {
      .step-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
      }
      
      .step-label {
        font-size: 9px;
      }
    }
  }
  
  .stats-section {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}
</style>